<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta name="format-detection" content="telephone=no">
	<meta content="telephone=no" name="format-detection">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<link rel="stylesheet" media="screen and (max-width:900px)" href="/assets/stylesheets/style_wap.css" type="text/css" />
	<link rel="stylesheet" media="screen and (min-width:900px)" href="/assets/stylesheets/style_pc.css" type="text/css" />
	<title>收货地址管理</title>
</head>
<body>
	<!-- 前端嵌套写法，仅供前端使用，首页有完整代码 -->
	<div class="topline" id="J_topline" data-til="收货地址管理">
		<nav th:replace="hjh/include::menuV"></nav>
	</div>

	<div class="padress content">
		<p class="btil">收货地址<span class="btilt">您已创建<span class="btilc" th:text="${total}">3</span>收货地址</span></p>
		<div class="list clearfix">
			<div class="item" th:each="address:${allAddress}" th:classappend="${address.isDefault}==1?'item_default'">
				<p class="item_def">默认</p>
				<p class="item_til" th:text="${address.name}">李文峰</p>
				<p class="item_name"><img src="/assets/images/icon_adress.png" class="item_ico"><span  th:text="${address.address}">海南省自治县龙东大道1920号</span></p>
				<p class="item_name"><img src="/assets/images/icon_phone.png" class="item_ico"><span th:text="${address.mobile}">15822221212</span></p>
				<div class="item_deal">
					<p class="item_do">
						<a href="javascript:;" th:attr="data-cid=${address.id},data-mobile=${address.mobile},data-name=${address.name},data-address=${address.address}"
						   class="J_item_edit item_dos">编辑地址</a>
						<a href="javascript:;" th:attr="data-cid=${address.id}" class="J_item_del item_dos">删除地址</a>
						<a href="javascript:;" th:attr="data-cid=${address.id}" class="J_item_dea item_dos">设为默认</a>
					</p>
				</div>
			</div>
			<a href="javascript:;" class="addadr alic" id="J_addadr">
				<img src="/assets/images/icon_new_address.png" class="addadr_i">
				<p class="addadr_t">新增地址</p>
			</a>
		</div>
	</div>
	<nav th:replace="hjh/include::bottomV"></nav>

	<!-- 银行卡弹层 -->
	<div class="pop adresspop" id="J_pop_adress">
		<div class="pop_model">
			<div class="pop_model_til">新增收货地址<a href="javascript:;" data-target="#J_pop_adress" class="J_pop_model_close pop_model_close"></a></div>
			<div class="formline">
				<div class="fline" hidden="hidden"><p class="ado">ID：</p><input class="J_ctrol ctrol" data-target="name" type="text" name="" id="J_id"></div>
				<div class="fline"><p class="ado">收货人：</p><input class="J_ctrol ctrol" data-target="name" type="text" placeholder="请填写收货人姓名" name="" id="J_name"></div>
				<div class="fline"><p class="ado">手机号码：</p><input class="J_ctrol ctrol" data-target="mobile" data-type="mobile" type="text" placeholder="请填写手机号码" name="" id="J_mobile"></div>
				<div class="fline"><p class="ado">详细地址：</p><input class="J_ctrol ctrol" data-target="adress" type="text" placeholder="请填写详细地址" name="" id="J_adress"></div>
				<div class="fline flinebtn"><a href="javascript:;" class="btn fbtm" id="J_btn">保存</a></div>
			</div>
		</div>
	</div>
	<nav th:replace="hjh/include::bottomV"></nav>
	<script language="javascript" type="text/javascript" src="/assets/javascript/jquery-2.1.4.min.js"></script>
	<script language="javascript" type="text/javascript" src="/assets/javascript/func.js"></script>
	<script type="text/javascript">
		$(function(){

			$('.J_ctrol').blur(function(){
				var self = $(this),
					val = self.val().trim(),
					type = self.attr('data-type')||'text',
					tar = self.attr('data-target');
				if(type=="mobile"){
					var regmobile = /^[1][0-9]{10}$/ig;
			        if(!regmobile.test(val)){
			            return;
			        };
				};
				if(val){
					self.val(val);
					data[tar] = val; // 数据填充
				};
			});
			$('.J_select').change(function(){
				var self = $(this),
					val = self.val(),
					tar = self.attr('data-target');
				if(val){
					self.val(val);
					data[tar] = val; // 数据填充
				};
			});


			//基础信息
			var J_btn = $('#J_btn'),
				isajax = false, // 设置开关
				data = {"province":1,"city":1,"area":1};


			J_btn.click(function(){
				if(isajax){return false;}
                data.id = $("#J_id").val();
                data.name = $("#J_name").val();
                data.mobile =$("#J_mobile").val();
                data.address =$("#J_adress").val();

				if(!data.name){
					errormsg($('#J_name'),'请填写收货人姓名');
					return;
				};
				if(!data.mobile){
					errormsg($('#J_mobile'),'请填写手机号码');
					return;
				};
				if(!data.address){
					errormsg($('#J_adress'),'请填写详细地址');
					return;
				};

				// ajax提交数据
				// alert('提交的数据：'+JSON.stringify(data));
				isajax = true;
				J_btn.html("正在提交···");
				$.ajax({
					type: "POST",
					url: "/address_save",
					data: JSON.stringify(data),
					dataType: "json",
					contentType: "application/json",
					success: function(res){
						if(res.code==0){
							// 提交成功
							alert('提交成功');
							window.location.href = window.location.href;
						}else{
							J_btn.html("提交");
						};
					},
					complete:function(){
						isajax = false;
					}
				});
			});

			// 弹框显示
			$('.J_item_edit').click(function(){
				var self = $(this);
				var cid = self.data('cid');
				var mobile = self.data('mobile');
				var address = self.data('address');
				var name = self.data('name');
				var	tar = $('#J_pop_adress');

				$("#J_id").val(cid);
                $("#J_name").val(name);
                $("#J_mobile").val(mobile);
                $("#J_adress").val(address);

				tar.show();
				setTimeout(function(){
					tar.addClass('pop_active')
				},10);
			});

			$('.J_pop_model_close').click(function(){
				console.log($(this).attr('data-target'))
				$($(this).attr('data-target')).hide().removeClass('pop_active');
			});

			$('#J_addadr').click(function(){
				var tar = $('#J_pop_adress');
				tar.show();
				setTimeout(function(){
					tar.addClass('pop_active')
				},10);
			});

			// 删除地址
			$('.J_item_del').click(function(){
				var mm = confirm("是否删除该收货地址？");
				if(mm){
					//ajax提交数据
					isajax = true;
                    var self = $(this);
					var cid = self.attr('data-cid');
					$.ajax({
						type: "GET",
						url: "/del_address?id="+cid,
						success: function(res){
							if(res.code==0){
								// 提交成功
								alert('删除成功');
								window.location.href = window.location.href; // 刷新
							}else{
								alert('删除失败');
							};
						},
						complete:function(){
							isajax = false;
						}
					});
				}

			});

			// 设为默认
			$('.J_item_dea').click(function(){
				var mm = confirm("是否设为默认收货地址？");
				if(mm){
					//ajax提交数据
					isajax = true;
                    var self = $(this);
                    var cid = self.attr('data-cid');
					$.ajax({
						type: "GET",
						url: "/set_address_defaut?id="+cid,
						success: function(res){
							if(res.code==0){
								// 提交成功
								alert('设置成功');
								window.location.href = window.location.href; // 刷新
							}else{
								alert('设置失败');
							};
						},
						complete:function(){
							isajax = false;
						}
					});
				}

			});
		});
	</script>
</body>
</html>
